<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : pt_200_03.jsp
    Description : 포토갤러리 등록/수정 폼.
    author Seung Hun
    since 2012. 8. 10.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 10.     Seung Hun     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/co/mn/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/co/mn/include/session.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/co/mn/include/header.jspf" %>
<script type="text/javaScript" src="/dextuploadfl/DEXTUploadFL.js"></script>
<script type="text/javaScript" language="javascript">
<!--
$(document).ready(function() {    
    /* form validation check */
    onloadCharCheck();
     
    /* List Page 이동 */
    $("#listButn").bind("click", moveListPage);
    /* Form Submit */
    $("#rgstButn").bind("click", blcSubm);
    /* Form 초기화 */
    $("#cnclButn").bind("click", formIniz);

    $("#videoButn").bind("click", imgPop);
    
    $("#videoClButn").bind("click", videoHidden);
});

/*
 * 리스트페이지 이동
 */
function moveListPage() {
    $("#hiddenForm").attr('action','/pt_200_01.do').submit();
}

/*
 * Form Submit
 */
function blcSubm() {
    if (!validateForm($("#mainForm"))) {
        return;
    }
    
    if (!isSchrChk($("#titl").val())) {
        alert("[제목] 은 특수문자(!#$%^&*|'<>-;)를 입력할 수 없습니다.");
        $("#titl").focus();
        return;
    }
    
    if (getTxtBkmgRmov($("#thumnImgNm").val()) == "") {
        alert("[이미지첨부] 는 필수 항목입니다.");
        return;
    }
    
    $("#reflYn").val(getChekcedValue(document.mainForm.radReflYn));
    
    $("#mainForm").attr('target','comIframe');
    if (getTxtBkmgRmov($("#mainForm #phtIdx").val()) != "") {
        $("#mainForm").attr('action','/pt_200_04.do');
    } else {
        $("#mainForm").attr('action','/pt_200_05.do');
    }
    $("#mainForm").submit();
}

/*
 * Form 초기화
 */
function formIniz() {
    $("form").each(function(){
       this.reset(); 
    });
    
    // 이미지 초기화
    if (getTxtBkmgRmov($("#mainForm #phtIdx").val()) != "") {
        $("#thumnImgNm").val("${result.thumnImgNm }");
    } else {
        $("#thumnImgNm").val("");
    }
    
    DEXTUploadFL.createUploadManager(
        "manager_container", // target div container
        "DEXTUPMAN", // id
        "/dextuploadfl/DEXT_TILE_UP_MANAGER.swf", // swf path
        "#ffffff", // background color
        "window", // window, transparent
        "", // ko, en
        "", // reserved name
        "simple", // simple, monitor
        "ForDEXTUPMAN" // fostfix name
    );
}

/*
 * DextUploadFL Thumbnail
 */
var uploadManager = null;

// 업로드 관리자에서 오류가 발생하면 호출됩니다.
function onErrorForDEXTUPMAN(err) {
    alert(err.code + "\r\n" + err.message + "\r\n" + err.detail);
}

function onApplicationReadyForDEXTUPMAN() {
    // 업로드 관리자 객체를 얻습니다.
    uploadManager = DEXTUploadFL.getUploadManager("DEXTUPMAN");    
    // 업로드 경로를 설정합니다. (상대경로가 아닌 전체경로가 필요합니다.)
    uploadManager.setUploadUrl("http://${rqInfo.domain}/CO000012.do");
    // 메타 정보 타입을 설정
    uploadManager.setCustomForm([
            { formName: "imgScn", formType: "text", title: "이미지구분", defaultVal: "P" }
    ]);
    // UI를 설정합니다.
    uploadManager.setUIStyle({
        fileList: { columnCount: 1 },           
        context: {
            edit: { visible: true, enabled: true }
        },
        tool: {
            edit: { enabled: false },
            transform: { enabled: false },
            crop: { enabled: true },
            thumbnail: { enabled: false }
        }
    });
    
    // 업로드할 확장자 제한
    uploadManager.setFilter([{ description: "이미지 파일", extension: "*.jpg;*.gif;*.png"}]);
    // 최대 파일 허용 개수 설정
    uploadManager.setMaxFileCount(1);
    // 개별 허용 크기를 설정합니다. - 10MB
    uploadManager.setMaxFileSize(10 * 1024 * 1024);
    // 전체 허용 크기를 설정합니다. - 10MB
    uploadManager.setMaxTotalFileSize(10 * 1024 * 1024);
    // 수정된 이미지는 원본과 함께 업로드합니다.
    uploadManager.setEnableUploadWithOriginalImage(false);
}

// 업로드 관리자가 업로드를 완료하면 호출됨
function onTransferCompletedForDEXTUPMAN() {
    // 업로드된 파일 정보를 폼 요소로 추가함.
    var upThumbInfo = uploadManager.getFileInfoByIndex(0);
    
    var reData = ""; // return data
    var reSplitData = ""; // return split data
    
    if (upThumbInfo.status == "completed") {
        reData = getTxtBkmgRmov(upThumbInfo.response);
        reSplitData = reData.split('|');
        
        if (reSplitData.length == 2) {
            if (getTxtBkmgRmov(reSplitData[0]) == "S0") {
                $("#thumnImgNm").val(reSplitData[1]);
            } else {
                alert("이미지 업로드가 되지 않았습니다. \n페이지 새로고침  후 다시 시도해 주십시오.");
            }
        } else {
            alert("이미지 업로드가 되지 않았습니다. \n페이지 새로고침  후 다시 시도해 주십시오.");
        }
    }
}

function checkPhoto(videoGubn){
	if(videoGubn=='Y'){
		document.getElementById("videoRow").style.display = '';
		document.getElementById("videoTag").nullable = true;
	}else{
		document.getElementById("videoRow").style.display = 'none';
		document.getElementById("videoTag").nullable = false;
	}
}

function videoUrlCheck(){
	var _url = document.getElementById("videoTag");
	var _urlValue = _url.value;
	if(_urlValue.indexOf("http://")==0){
		_urlValue = _urlValue.replace("http://","");
	}
	if(_urlValue.indexOf("https://")==0){
		_urlValue = _urlValue.replace("https://","");
	}
	_url.value = _urlValue;
	
	return _urlValue;
}

function imgPop(){
	videoHidden();
	var _url = videoUrlCheck();
	
    document.getElementById("ybPlayer").innerHTML = "<iframe id='youtubePlayer' name='youtubePlayer' type='text/html' width='510px' height='360px' src='http://"+ _url + "' frameborder='0' allowfullscreen>";
}

function videoHidden(){
    document.getElementById("ybPlayer").innerHTML = "";
}
//-->
</script>
</head>
<body>
<div id="wrap">

    <!-- top -->
    <%@ include file="/WEB-INF/jsp/co/mn/include/top.jsp" %>
    <!-- top -->

    <!-- container -->
    <div id="container">
    
        <!-- LNB -->
        <%@ include file="/WEB-INF/jsp/co/mn/include/left.jsp" %>
        <!-- LNB -->
        
        <div id="contents">
        
            <!-- location -->
            <%@ include file="/WEB-INF/jsp/co/mn/include/location.jsp" %>
            <!-- location -->
            
            <%-- request --%>
            <form id="hiddenForm" name="hiddenForm" method="post">
                <input type="hidden" id="currentPageNo" name="currentPageNo" value="${rqInfo.currentPageNo }" />
                <input type="hidden" id="srchScn" name="srchScn" value="${rqInfo.srchScn }" />
                <input type="hidden" id="srchTxt" name="srchTxt" value="${rqInfo.srchTxt }" />
            </form>
            
            <p class="msgRequired"><span>*</span>표시는 필수 입력항목입니다</p>
            <form id="mainForm" name="mainForm" method="post">
                <input type="hidden" id="phtIdx" name="phtIdx" value="${result.phtIdx }" />
                <input type="hidden" id="currentPageNo" name="currentPageNo" value="${rqInfo.currentPageNo }" />
                <input type="hidden" id="srchScn" name="srchScn" value="${rqInfo.srchScn }" />
                <input type="hidden" id="srchTxt" name="srchTxt" value="${rqInfo.srchTxt }" />
                <input type="hidden" id="reflYn" name="reflYn" value="${result.reflYn }" />
                
                <%-- 업로드 Thumbnail 이미지 정보 --%>
                <input type="hidden" id="thumnImgNm" name="thumnImgNm" value="${result.thumnImgNm }" />
            <table border="1" class="frmTable" summary="포토갤러리 관리의 등록일,상태,제목,이미지첨부,내용을 수정 또는 등록하는 표">
                <col width="17%" />
                <col width="17%" />
                <col width="10%" />
                <col width="23%" />
                <col width="10%" />
                <col width="23%" />
                <tbody>
                    <tr>
                        <th>등록일</th>
                        <td><%=CsrUtil.getDate("yyyy-MM-dd") %></td>
                        <td class="subThead">상태</td>
                        <td>
                            <span class="radioArea">
                            <c:if test="${result.reflYn == '공개' }">
                                <label for="checkClosed"><input type="radio" id="radReflYn" name="radReflYn" value="N" />비공개</label>
                                <label for="checkOpen"><input type="radio" id="radReflYn" name="radReflYn" checked="checked" value="Y" />공개</label>
                            </c:if>
                            <c:if test="${result.reflYn == '비공개' || result.reflYn == null }">
                                <label for="checkClosed"><input type="radio" id="radReflYn" name="radReflYn" checked="checked" value="N" />비공개</label>
                                <label for="checkOpen"><input type="radio" id="radReflYn" name="radReflYn" value="Y" />공개</label>
                            </c:if>
                            </span>
                        </td>
                        <td class="subThead">구분</td>
                        <td>
                            <span class="radioArea">
                            <c:if test="${result.videoYn == 'Y' }">
                                <label for="checkClosed"><input type="radio" id="videoYn" name="videoYn" value="N" onclick="checkPhoto(this.value)"/>사진</label>
                                <label for="checkOpen"><input type="radio"   id="videoYn" name="videoYn" value="Y" onclick="checkPhoto(this.value)" checked="checked"/>동영상</label>
                            </c:if>
                            <c:if test="${result.videoYn == 'N' || result.videoYn == null }">
                                <label for="checkClosed"><input type="radio" id="videoYn" name="videoYn" value="N" onclick="checkPhoto(this.value)" checked="checked"/>사진</label>
                                <label for="checkOpen"><input type="radio"   id="videoYn" name="videoYn" value="Y" onclick="checkPhoto(this.value)" />동영상</label>
                            </c:if>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th><sup>*</sup>제목</th>
                        <td colspan="5"><input type="text" title="제목" maxlength="50" id="titl" name="titl" value="${result.titl }" nullable="true" minbyte="1" /></td>
                    </tr>
                    <c:if test="${result.videoYn == 'Y' }">
                    <tr id="videoRow" name="videoRow" style="display:">
                    </c:if>
                    <c:if test="${result.videoYn == 'N' || result.videoYn == null }">
                    <tr id="videoRow" name="videoRow" style="display:none">
                    </c:if>
                        <th><sup>*</sup>영상 주소</th>
                        <td colspan="5"><input type="text" title="동영상 주소" maxlength="400"  id="videoTag" name="videoTag" value="${result.videoTag }" 
                        						<c:if test="${result.videoYn == 'Y' }">
								                nullable="true" 
								                </c:if>
								                <c:if test="${result.videoYn == 'N' || result.videoYn == null }">
								                nullable="false" 
								                </c:if>
                        						minbyte="10" />
			                <div class="btnBoard">
                			<span class="flow"><p class="explain">* 예시 : www.youtube.com/v/SIKThdX3Czg (유튜브만 지원가능합니다.)</p>
				            </span>
				                <span class="reverse">
				                	<input type="submit" id="videoButn" title="미리보기" value="미리보기" />
				                	<input type="submit" id="videoClButn" title="접기" value="접기" />
				                </span>
				            </div>
				            <div id="ybPlayer"></div>
                        </td>
                    </tr>
                    <tr>
                        <th>정렬순서</th>
                        <td colspan="5">
                            <select id="sortNum" name="sortNum" style="width:90px;">
                                <option value="1" <c:if test="${result.sortNum == 1 }"><c:out value="selected"/></c:if>>일반노출</option>
                                <option value="0" <c:if test="${result.sortNum <1 }"><c:out value="selected"/></c:if>>우선노출</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><sup>*</sup>이미지 첨부</th>
                        <td colspan="5">
                            <div class="imgUpload">
                                <p>
                                    <div id="manager_container" style="width:100%;height:300px;margin-top:5px;"></div>
                                    <script type="text/javascript">
                                        DEXTUploadFL.createUploadManager(
                                            "manager_container", // target div container
                                            "DEXTUPMAN", // id
                                            "/dextuploadfl/DEXT_TILE_UP_MANAGER.swf", // swf path
                                            "#ffffff", // background color
                                            "window", // window, transparent
                                            "", // ko, en
                                            "", // reserved name
                                            "simple", // simple, monitor
                                            "ForDEXTUPMAN" // fostfix name
                                        );
                                    </script>
                                </p>
                                <p class="mainFile">
                                    * 포토갤러리 화면에 등록되는 이미지는 관리자가 올린 이미지가 리사이징되어 등록됩니다.<br />가장 적절한 이미지 사이즈는 <strong>510*360px</strong>이며, 이 비율이 아닐경우 이미지가 왜곡될 수 있습니다.<br />
                                    * <strong>10MB</strong> 이하의 jpg, gif, png의 이미지파일 등록을 권장합니다.
                                </p>
                            </div>
                            <c:if test="${result.thumnImgNm != null }">
                            <div><b>기존 이미지 : </b><a href="#" onclick="getImgPopup('/upfile/${result.thumnImgPath }/${result.thumnImgNm}');return false;">${result.thumnImgNm }</a></div>
                            </c:if>
                        </td>
                    </tr>
                    <tr>
                        <th><sup>*</sup>내용</th>
                        <td colspan="5">
                            <input type="text" title="내용" maxlength="140" id="sbc" name="sbc" value="${result.sbc }" nullable="true" minbyte="1" />
                            <p class="explain">* 내용은 200자까지 등록됩니다. 140자 초과 시 입력이 되지 않습니다.</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </form>
            <div class="btnBoard">
                <span class="flow">
                    <input type="submit" id="listButn" title="목록" value="목록" />
                </span>
                <span class="reverse">
                    <input type="submit" id="rgstButn" title="등록" value="등록" />
                    <input type="submit" id="cnclButn" title="취소" value="취소" />
                </span>
            </div>
        </div>
    </div>
    <!-- /container -->

    <!-- footer -->
    <%@ include file="/WEB-INF/jsp/co/mn/include/bottom.jsp" %>
    <!-- /footer -->
    
</div>
</body>
</html>